<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云轮播图</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="banner" id="banner">
        <!--创建背景区域来实现虚化背景-->
        <div id="banner_bg" class="bg"></div>
        <!--轮播图内容-->
        <section>
            <!--存放图片-->
            <div id="banner_picture" class="picture">
                <a href="#" id="banner_link" class="link">
                    <img id="banner_image" class="image" src="" alt="" />
                </a>
            </div>
            <!--选择指示小白点区域-->
            <div id="banner_select" class="select"></div>
            <!--左右翻页按钮，使用字体图标-->
            <div id="banner_bt_left" class="bt left">
                <i class="iconfont icon-Left"></i>
            </div>
            <div id="banner_bt_right" class="bt right">
                <i class="iconfont icon-Right"></i>
            </div>
        </section>
    </div>
    <script src="index.js"></script>
</body>

</html>